<template>
  <div>
    <a-card :bordered="false" style="position: relative; margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="position: relative">
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <div class="mode_item">
            <a-form-model-item label="关键词">
              <a-input v-model="pageFilter.content" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="关键词级别">
              <j-dict-select-tag v-model="pageFilter.level" placeholder="请选择" dictCode="keywordLevel" />
            </a-form-model-item>
            <a-form-model-item label="关键词类别">
              <j-dict-select-tag allowClear v-model="pageFilter.category" placeholder="请选择" dictCode="keywordType" />
            </a-form-model-item>
          </div>
          <div class="mode_item">
            <a-form-model-item label="状态">
              <a-radio-group buttonStyle="solid" v-model="pageFilter.status">
                <a-radio-button v-for="(item, key) in statusOptions" :key="key" :value="item.value">
                  {{ item.text }}
                </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="创建时间" class="timeBox">
              <a-radio-group buttonStyle="solid" v-model="pageFilter.timeType">
                <a-radio-button v-for="(item, key) in options" :key="key" :value="item.value">
                  {{ item.text }}
                </a-radio-button>
              </a-radio-group>
              <a-range-picker
                v-if="pageFilter.timeType === '0'"
                :allowClear="true"
                v-model="rangePickerTime"
                valueFormat="YYYY-MM-DD"
                @change="rangePickerChange"
                style="margin-left: 10px"
              />
            </a-form-model-item>
          </div>
          <div style="margin-top: 20px">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询 </a-button>
              <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div style="margin-bottom: 20px">
        <a-button type="primary" @click="onAdd()">新建</a-button>
        <a-button type="primary" :disabled="isDisabled" @click="onBatchChangeStatus(1)" style="margin: 0 20px;"
          >启用</a-button
        >
        <a-button type="primary" :disabled="isDisabled" @click="onBatchChangeStatus(2)">停用</a-button>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <custom-table
          ref="table"
          rowKey="id"
          :showColSettings="true"
          :hideColSettings="['action']"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @selectedRowKeys="onSelectedKeys"
          @change="onTableChange"
        >
          <template v-slot:colSettings>
            <a-button class="table-custom-cols"> 字段配置 </a-button>
          </template>
          <template slot="level" slot-scope="text">
            <span v-if="text == '1'">A</span>
            <span v-if="text == '2'">B</span>
            <span v-if="text == '3'">C</span>
            <span v-if="text == '4'">D</span>
          </template>
          <template slot="status" slot-scope="text">
            <span class="text_color_3" v-if="text == '1'" style="cursor: pointer;">启用</span>
            <span class="text_color_4" v-if="text == '2'" style="cursor: pointer;">停用</span>
          </template>
          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <template>
              <a-button @click="onEdit(record)" type="link" style="padding: 0;">编辑</a-button>
              <a-divider type="vertical" />
            </template>
            <a-button type="link" style="padding:0;" @click="onChangeStatus(record)">{{
              record.status === 2 ? '启用' : '停用'
            }}</a-button>
          </template>
        </custom-table>
      </div>
      <!--页面来源pageType， 1案事件列表, 2明文情报列表, 3密文情报列表,4重点人列表,5明文情报配置,6种子号码列表,7时空碰撞" -->
      <!-- 前4个都是案事件，用AddCaseModal，后面2个是情报事件，AddIntellModal -->
    </a-card>
    <editModal ref="editModal" :title="modalTitle" @ok="onQuery"></editModal>
  </div>
</template>

<script>
import moment from 'moment'
import CustomTable from '@/components/zxd/Table/CustomTable'
import editModal from './modules/editModal.vue'
import { getDictItemsFromCache } from '@/api/api'
import { getList, editStatus, batchEditStatus } from '@/api/wxSmuggle/keywordOptions.js'
export default {
  components: {
    CustomTable,
    editModal
  },
  data() {
    return {
      moment,
      labelCol: { span: 7 },
      wrapperCol: { span: 17 },
      rangePickerTime: [],
      loading: false,
      visible: false,
      options: [
        { value: '2', text: '今天' },
        { value: '3', text: '近三天' },
        { value: '4', text: '近七天' },
        { value: '0', text: '自定义' }
      ],
      statusOptions: [
        { value: '0', text: '全部' },
        { value: '1', text: '启用' },
        { value: '2', text: '停用' }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          align: 'center',
          width: 60,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '关键词',
          dataIndex: 'content',
          width: 140,
          align: 'center'
          // scopedSlots: { customRender: 'taskCode' }
        },
        {
          title: '关键词级别',
          dataIndex: 'level',
          width: 115,
          align: 'center',
          scopedSlots: { customRender: 'level' }
        },
        {
          title: '关键词类别',
          dataIndex: 'category',
          width: 60,
          align: 'center',
          customRender: (text, record) => {
            return this.filterMultiDictText('keywordType', text)
          }
        },
        {
          title: '关键词描述',
          dataIndex: 'description',
          width: 200,
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 60,
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: 200,
          align: 'center'
        },
        {
          title: '创建人',
          dataIndex: 'createBy',
          width: 200,
          align: 'center'
        },
        {
          title: '操作',
          width: 100,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
        category: ''
      },
      pageData: {},
      isDisabled: true,
      selectKeys: [],
      modalTitle: '新增关键词'
    }
  },
  created() {},
  async mounted() {
    this.onQuery()
  },
  methods: {
    onSelectedKeys(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
        category: ''
      }
      this.rangePickerTime = []
      this.refreshTable()
    },
    filterMultiDictText(dictCode, text) {
      if (!text) return
      let datas = getDictItemsFromCache(dictCode)
      return this.$filterDictText(datas, text)
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      getList(this.pageFilter)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
            // this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    //添加
    onAdd() {
      this.$refs.editModal.add()
      this.modalTitle = '新增关键词'
    },
    // 详情
    onDetail(record) {
      this.$refs.caseDetailModalId.show(record)
    },
    onEdit(record) {
      console.log(record)
      record.level = Number(record.level)
      record.category = Number(record.category)
      this.$refs.editModal.edit(record)
    },
    onChangeStatus(record) {
      editStatus({ id: record.id, status: record.status === 1 ? 2 : 1 }).then(res => {
        console.log(res)
        const { success } = res
        if (success) {
          this.$message.success('修改状态成功！')
          this.refreshTable()
        } else {
          this.$message.warn('操作失败！')
        }
      })
    },
    // 预警时间
    rangePickerChange(date) {
      this.$set(this.pageFilter, 'startTime', date[0])
      this.$set(this.pageFilter, 'endTime', date[1])
    },

    // 批量启用停用
    onBatchChangeStatus(status) {
      let that = this
      const params = {
        ids: this.selectKeys,
        status
      }
      this.$confirm({
        title: `确定${status === 1 ? '启用' : '停用'}勾选的关键词？`,
        okText: '确定',
        onOk() {
          batchEditStatus(params)
            .then(async res => {
              if (res.success) {
                that.$message.success(res.message)
                that.onQuery()
              } else {
                that.$message.warn(res.message)
              }
            })
            .catch(e => {
              that.$message.warn('请求失败！')
            })
        }
      })
      // batchEditStatus(params).then(res => {
      //   this.$message.success('修改状态成功！')
      // })
    }
  }
}
</script>
<style lang="less" scoped>
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;
  > div {
    flex: 0 0 25%;
  }
  .timeBox {
    flex: 0 0 64%;
    /deep/.ant-col-7 {
      width: 11%;
    }
    /deep/.ant-col-17 {
      width: 73%;
    }
  }
  & > * {
    width: 100%;
    margin-bottom: 0;
    padding: 5px 0;
  }
  &.mode_item_none {
    > div {
      flex: inherit;
    }
  }
  .zdy-form-item-label {
    /deep/.ant-form-item-label {
      width: 95px;
    }
    &.xzqh-form-item-label {
      /deep/.ant-form-item-control-wrapper {
        .ant-form-item-children {
          display: -webkit-box;
        }
      }
      /deep/.area-select {
        // margin-top: 4px;
        line-height: 1;
      }
      /deep/.select-tag {
        width: 162px !important;
        margin-left: 10px;
        margin-top: 3px;
      }
      // /deep/.area-select .area-selected-trigger {
      //   line-height: 1.15;
      // }
      // /deep/.ant-select-lg .ant-select-selection--single{
      //   height: 34px;
      // }
      // /deep/.ant-select-lg .ant-select-selection__rendered {
      //   line-height: 34px;
      //   font-size: 14px;
      // }
    }
  }
}
.search-wrapper-btn {
  position: absolute;
  right: 0;
  top: 15px;
  z-index: 1;
}
/deep/.table-custom-cols {
  top: -48px !important;
}
.custom-ewm {
  padding: 14px;
  background-color: #fff;
  border: 1px #ccc solid;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
/deep/.ant-dropdown-menu-item {
  text-align: center;
  border-bottom: 1px #f5f5f5 solid;
  &:last-child {
    border-bottom: 0;
  }
}
/deep/.anticon.anticon-down {
  font-size: 14px !important;
}

.table-page-content {
  /deep/.ant-table-thead > tr > th,
  /deep/.ant-table-tbody > tr > td {
    padding-left: 0;
    padding-right: 0;
  }
  /deep/.ant-table-thead > tr:first-child > th:first-child,
  /deep/.ant-table-tbody > tr > td:first-child {
    padding-left: 10px;
  }
  .text_color_1 {
    color: #000;
  }
  .text_color_2 {
    color: #1990ff;
  }
  .text_color_3 {
    color: #43a812;
  }
  .text_color_4 {
    color: #d9001b;
  }
  .text_color_5 {
    color: #b6aeae;
  }
}
</style>
